


How to Mimic Email Windows

by La_Temperanza



Series: AO3 Work Skins/Tutorials [12]
Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen
Language: English
Status: Completed
Published: 2016-09-05
Updated: 2016-09-05
Packaged: 2018-08-12 23:31:13
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 2,551
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/7953412
Author URL: https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza
Summary: <blockquote class="userstuff">
              <p>This is a tutorial/live example on how to mimic email windows on AO3 without the need to use images.</p>
            </blockquote>





	How to Mimic Email Windows

**Author's Note:**

  * For [momotastic](https://archiveofourown.org/users/momotastic/gifts).



**Received Email:**

From: johndoe@email.com

Subject: Important!

To: janedoe@email.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget eleifend nunc. Donec ultrices lorem vel diam sodales eleifend. Aliquam sed tortor nec arcu blandit scelerisque. Fusce ac sagittis nisl, ut ornare risus. Proin scelerisque turpis orci, posuere egestas risus dignissim eu. Nam non consectetur nulla, in semper mauris. Vestibulum eu augue semper, gravida nisi nec, feugiat urna. Sed consectetur id neque sit amet vulputate. Sed id urna arcu.

Proin quis augue felis. Aliquam eget nulla diam. Praesent commodo at enim a facilisis. Nullam diam felis, dignissim vel augue nec, tempor suscipit nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis at elit ac orci lacinia mollis eu varius est. Maecenas sit amet tellus in dui dictum dignissim ac et nibh.

Nulla nec ante mattis, mollis nibh vitae, tristique massa. Fusce et nisi ac magna pharetra pretium. Sed egestas tincidunt convallis. Donec nec neque in diam aliquam egestas quis viverra sapien. Donec vel fringilla odio, eget tempor lorem. In euismod quam vel accumsan sodales. Donec suscipit gravida mattis. Morbi vitae erat risus.

Nulla cursus tellus vel ex luctus, vel mattis purus tristique. Nunc hendrerit suscipit ligula, eu viverra nisl pellentesque quis. Etiam sit amet lacinia tortor, eu condimentum libero. Nullam id vehicula metus. Nulla eleifend consectetur iaculis. Donec a consectetur lectus. Nam quis metus sit amet nibh finibus dictum. Nullam blandit posuere sapien, vel vulputate nisl egestas sed. In nec velit ultricies, placerat sapien at, feugiat dolor. Nam id enim augue. Aenean vehicula egestas lorem, eu aliquam nisi blandit vitae. Integer volutpat mollis nisl at suscipit. Cras sed est vitae dolor imperdiet interdum. Sed pretium, velit quis ullamcorper congue, dui libero lobortis ligula, in ultricies arcu tellus sed enim. Etiam at sollicitudin tortor. Nam aliquet hendrerit facilisis.

Duis odio ligula, iaculis ut sem et, imperdiet elementum quam. Quisque pharetra elit augue, ut cursus metus porttitor condimentum. Suspendisse pretium posuere est, in tristique libero tincidunt pharetra. Nullam maximus dolor in mauris semper cursus. Nunc dignissim lorem blandit tincidunt lobortis. Suspendisse elementum est quis nulla vehicula, vel commodo est eleifend. Aenean eget massa nulla. Duis nec metus eu augue dignissim cursus id sed erat. Phasellus elementum eros dui, nec ullamcorper turpis pulvinar sed. Cras viverra consequat justo id sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae bibendum velit.

  

* * *

**Sending Email:**

 

To: johndoe@email.com  
CC: johnsnow@email.com

Subject: Re: Important!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget eleifend nunc. Donec ultrices lorem vel diam sodales eleifend. Aliquam sed tortor nec arcu blandit scelerisque. Fusce ac sagittis nisl, ut ornare risus. Proin scelerisque turpis orci, posuere egestas risus dignissim eu. Nam non consectetur nulla, in semper mauris. Vestibulum eu augue semper, gravida nisi nec, feugiat urna. Sed consectetur id neque sit amet vulputate. Sed id urna arcu.

 

* * *

# HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "[Create Work Skin](http://archiveofourown.org/skins/new?skin_type=WorkSkin)". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to put the following:
    
    
    #workskin .window {
      text-align: justify;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      margin-bottom: 0;
    }
    
    #workskin .topbar {
      background-color: #404040;
      color: #FFFFFF;
      border-color: #404040;
      border-style: solid;
      border-width: 1px;
      margin-top: 0;
      margin-bottom: 0;
      width: 66%;
      padding: 2px;
    height: 1.5em;
    overflow: hidden;
      text-overflow: clip;
    }
    
    #workskin .topbar:before {
      content: 'Email';
      display: inline-block;
      position: relative;
      float: left;
      font-weight: bold;
      padding: 0 3px;
    width: 85%;
    }
    
    #workskin .topbar:after {
      content: ' _ X';
      display: inline-block;
      position: relative;
      font-weight: bold;
      padding-right: 5px;
      float: right;
      color: #cfcfcf;
      -webkit-transform: scale(1.5, 1.0);
      -moz-transform: scale(1.5, 1.0);
      -ms-transform: scale(1.5, 1.0);
      -o-transform: scale(1.5, 1.0);
      transform: scale(1.5,1.0);
      cursor: pointer;
    }
    
    #workskin .textfield {
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      border-bottom: none;
      margin-top: 0;
      margin-bottom: 0;
      width: 66%;
      padding: 2px;
      color: #000000;
      background-color: #FFFFFF;
    }
    
    #workskin .ebody {
      width: 66%;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2px;
      padding-right: 2px;
      text-align: justify;
      color: #000000;
      background-color: #FFFFFF;
      margin-left: auto;
      margin-right: auto;
      overflow: auto;
      display: block;
      height: 250px;
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
    }
    
    #workskin .ebody::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    
    #workskin .ebody::-webkit-scrollbar:vertical {
      width: 12px;
    }
    
    #workskin .ebody::-webkit-scrollbar:horizontal {
      height: 12px;
    }
    
    #workskin .ebody::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .5);
      border-radius: 10px;
      border: 2px solid #ffffff;
    }
    
    #workskin .ebody::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #ffffff;
    }
    
    #workskin .buttonbar {
      border-color: #cfcfcf;
      background-color: #f5f5f5;
      color: #000000;
      border-style: solid;
      border-width: 1px;
      border-top: none;
      margin-top: 0;
      margin-bottom: 0;
      width: 66%;
      padding: 2px;
    height: 1.5em;
    overflow: hidden;
      text-overflow: clip;
    }
    
    #workskin .buttonbar:after {
      content: 'Reply | Forward | Delete';
      display: inline-block;
      position: relative;
      float: left;
      padding: 0 3px;
      cursor: pointer;
    }
    

Let me break down what each part is. First there's #workskin .window:
    
    
    #workskin .window {
      text-align: justify;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      margin-bottom: 0;
    }

This affects the top bar of the "window" so to speak, as well as the text fields for the email addresses and subject line. The only thing you should edit here is if you don't want the email centered you would remove margin-left and margin-right. (But you would need to remove it from the other sections as well which I'll discuss later).

Next is #workskin .topbar:
    
    
    #workskin .topbar {
      background-color: #404040;
      color: #FFFFFF;
      border-color: #404040;
      border-style: solid;
      border-width: 1px;
      margin-top: 0;
      margin-bottom: 0;
      width: 66%;
      padding: 2px;
    height: 1.5em;
    overflow: hidden;
      text-overflow: clip;
    }
    
    #workskin .topbar:before {
      content: 'Email';
      display: inline-block;
      position: relative;
      float: left;
      font-weight: bold;
      padding: 0 3px;
    width: 85%;
    }
    
    #workskin .topbar:after {
      content: ' _ X';
      display: inline-block;
      position: relative;
      font-weight: bold;
      padding-right: 5px;
      float: right;
      color: #cfcfcf;
      -webkit-transform: scale(1.5, 1.0);
      -moz-transform: scale(1.5, 1.0);
      -ms-transform: scale(1.5, 1.0);
      -o-transform: scale(1.5, 1.0);
      transform: scale(1.5,1.0);
      cursor: pointer;
    }

.topbar is what it sounds like, the top bar of the window. .topbar itself affects what color it is (currently the dark grey color) and how wide it is. .topbar:before is a psuedoclass, which means we can put text in the section labeled "content" that will show up only when the style is viewed. Which means that if the creator's style is turned off, you're not left with a random "Email" in the middle of your text. (Go ahead and [turn off creator's style](http://archiveofourown.org/works/7953412?style=disable) right now if you want a better idea of what I mean.)

Right now it's "content: 'Email'", but you can remove it or even change it to say something else, like "New Email!" or the subject line of the email in question. Just be aware that whatever you put would be the line for all emails unless you create multiple top bar sections for each email (i.e. .topbar2, .topbar3, etc.) ~~Also, try to refrain from making anything long, because on mobile the text tends to pop out of the bar if the text is too long.~~ **EDIT:** By adding overflow: hidden; and text-overflow: clip; to the .topbar and width: 85%; to .topbar:before, you now should be able to make your text as long as you would like, it will just cut off if the window is too small to allow the full text. 

.topbar:after is simply a way to mimic the minimize and close buttons of the window. I put a little tidbit that the mouse changes when one hovers over it, but you sadly can't actually affect the window.

Next is #workskin .textfield:
    
    
    #workskin .textfield {
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      border-bottom: none;
      margin-top: 0;
      margin-bottom: 0;
      width: 66%;
      padding: 2px;
      color: #000000;
      background-color: #FFFFFF;
    }

This affects what the text fields for email addresses and subject line. Again, not much to change here, unless you want to change the width and/or colors of the fields.

Next is the main part or body of the email, #workskin .ebody:
    
    
    #workskin .ebody {
      width: 66%;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 2px;
      padding-right: 2px;
      text-align: justify;
      color: #000000;
      background-color: #FFFFFF;
      margin-left: auto;
      margin-right: auto;
      overflow: auto;
      display: block;
      height: 250px;
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
    }
    
    #workskin .ebody::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    
    #workskin .ebody::-webkit-scrollbar:vertical {
      width: 12px;
    }
    
    #workskin .ebody::-webkit-scrollbar:horizontal {
      height: 12px;
    }
    
    #workskin .ebody::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, .5);
      border-radius: 10px;
      border: 2px solid #ffffff;
    }
    
    #workskin .ebody::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #ffffff;
    }

Remember how I mentioned before that if you didn't want to have your email centered, there would be another section you would have to remove margin-left and margin-right from? Here it is. You can also change the width, the colors, and the height of the email body box. I've added an overflow: auto;, which creates scrollbars if the text gets too long to fit in the height you've dictated, but you can remove it and the height if you want the box to stretch to fit the text no matter how long. (the webkit parts are so scrollbars show up on mobile, so delete that too if you're anti-scrollbars for some reason.)

Finally, there's #workskin .buttonbar:
    
    
    #workskin .buttonbar {
      border-color: #cfcfcf;
      background-color: #f5f5f5;
      color: #000000;
      border-style: solid;
      border-width: 1px;
      border-top: none;
      margin-top: 0;
      margin-bottom: 0;
      width: 66%;
      padding: 2px;
    height: 1.5em;
    overflow: hidden;
      text-overflow: clip;
    }
    
    #workskin .buttonbar:after {
      content: 'Reply | Forward | Delete';
      display: inline-block;
      position: relative;
      float: left;
      padding: 0 3px;
      cursor: pointer;
    }

Like the .topbar, this is a psuedoclass and a way to have text appear to be there without actually being there. Again, you can delete it or change it to whatever text you want (like how the top the examples change depending on whether it's a received email or sending an email), but ~~be aware that again there's a limit before the text pops out of the bar.~~ **EDIT:** By adding overflow: hidden; and text-overflow: clip; to the .buttonbar, the text now should not pop out but just be clipped off. 

Hit "Submit" (or "Update" if adding to a previous work skin), and you've created the work skin for the email window. Now to implement it.

Go to your the work you want the emails, and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and how you want you want your emails formatted will change what coding you use.

If you wanted something similar to the example we've already used, you would write the following in your Work Text:
    
    
    <div class="window">
    <p class="topbar"></p>
    <p class="textfield">From: [email here]</p>
    <p class="textfield">Subject: [Subject line]</p>
    <p class="textfield">To: [email here]</p></div>
    <div class="ebody">
    <p>Email here.</p>
    <p>You can even keep your separate paragraphs!</p></div>
    <p class="buttonbar"></p>

Which gives you the following:

From: [email here]

Subject: [Subject line]

To: [email here]

Email here.

You can even keep your separate paragraphs!

~~**Note:** You **must** have  &nbsp between <p class="topbar">&nbsp</p> and <p class="buttonbar">&nbsp</p> or else your psuedoclasses will probably give you trouble. After awhile the AO3 parser will just change the &nbsp to a blank space, but you need to make sure you put it in every time you're putting in a new email.~~ **EDIT:** You don't need to do this anymore by adding height: 1.5em; to both #workskin .topbar and #workskin .buttonbar.  Such an easy solution that I missed the first time around, ugh.

If you look at the sending email example from above, you might notice how I have the To: field and the CC: field in the same box. That's done by simply adding a br tag instead a separate p tag:
    
    
    <p class="textfield">To: johndoe@email.com<br />
    CC: johnsnow@email.com</p>

This is pretty plain, but you can definitely add the bold or italics tag around anything directly in your work text. Or you can always add a section in your workskin to affect color, font, and size of any of your text. For example, if we add this to our workskin:
    
    
    #workskin .signature {
      color: blue;
      font-family: "Comic Sans MS";
      font-size: 1.5em;
    }

And in the Work Text we put the following:
    
    
    <div class="window">
    <p class="topbar">&nbsp</p>
    <p class="textfield">From: [email here]</p>
    <p class="textfield">Subject: [Subject line]</p>
    <p class="textfield">To: [email here]</p></div>
    <div class="ebody"><p>Email here.</p><p>Sincerely,</p>
    <p>- John Doe</p>
    <p class="signature">~~~Cliche stock email signature here.~~~</p></div>
    <p class="buttonbar">&nbsp</p>

Then we get the following:

 

From: [email here]

Subject: [Subject line]

To: [email here]

Email here.

Sincerely,

\- John Doe

~~~Cliche stock email signature here.~~~

 

You can also post image in the email just like you normally would, though the email window should not change size but simply add scrollbars if needed (unless you've changed this aspect):

 

From: [email here]

Subject: [Subject line]

To: [email here]

Here's a screenshot of my skins tumblr which is both meta and advertising. Click the image to visit it.

[ ](http://to-skin-a-fic.tumblr.com/)

 

**EDIT 1/3/18:** theballxxnsquad on tumblr made a request on how to add file attachments, and I'm not sure if this is what they were looking for but I decided to give it a shot. I used three different icons for attachment possibilities: a document for doc files, a picture frame for images, and a paperclip for every other file. You can utilize them by adding the following to your workskin: 
    
    
    #workskin .docattach {
      background-color: #FFFFFF;
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      margin: .25em;
      padding: .25em;
      cursor: pointer;
      display: inline-table;
    }
    
    #workskin .docattach::before {
      content: '\1F5BA';
    }
    
    #workskin .imageattach {
      background-color: #FFFFFF;
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      margin: .25em;
      padding: .25em;
      cursor: pointer;
      display: inline-table;
    }
    
    #workskin .imageattach::before {
      content: '\1F5BC';
    }
    
    #workskin .attach {
      background-color: #FFFFFF;
      border-color: #cfcfcf;
      border-style: solid;
      border-width: 1px;
      margin: .25em;
      padding: .25em;
      cursor: pointer;
      display: inline-table;
    }
    
    #workskin .attach::before {
      content: '\1F4CE';
    }
    

And in the work text you put the following:
    
    
    <div class="window">
    <p class="topbar"></p>
    <p class="textfield">From: [email here]</p>
    <p class="textfield">Subject: [Subject line]</p>
    <p class="textfield">To: [email here]</p>
    <p class="textfield">Attached: <span class="docattach"> <u>attachment.doc (9 KB) </u></span> <span class="imageattach"> <u>attachment.gif (70 KB) </u></span> <span class="attach"> <u>attachment.xyz (5 MB) </u></span></p></div><div class="ebody">
    <p>Email here.</p></div>
    <p class="buttonbar"></p>

And you'll get something like this:

From: [email here]

Subject: [Subject line]

To: [email here]

Attached:  attachment.doc (9 KB) attachment.gif (70 KB)  attachment.xyz (5 MB) 

Email here.

# NOTES

\- This is modeled slightly after the window that pops up whenever you go to create a new message in gmail, just very plain. Of course there's probably a way to make it look more detailed, but I wanted to make something relatively simple.  
  
\- As always, if you have any questions or concerns, feel free to leave a comment here or send me an ask at [to-skin-a-fic.tumblr.com](http://to-skin-a-fic.tumblr.com/)  
  



End file.
